<template>
    <teleport to=".header">
        <SdyHeader title="购物车" right="more"></SdyHeader>
    </teleport>
    <!-- 非空 -->
    <div v-if="cartList.length">
        <van-swipe-cell v-for="item in cartList" :key="item.cartid">
            <van-card :price="item.originprice.toFixed(2)" :title="item.proname" class="goods-card" :thumb="item.img1" />
            <p class="cart-item-count">
                <van-stepper v-model="item.num" integer />
            </p>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>
    </div>
    <!-- 空购物车 -->
    <div v-else>
        <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
            description="您的购物车内还没有内容">
            <van-button round type="primary" class="bottom-button">去购物</van-button>
        </van-empty>
    </div>
</template>

<script name="sdyCart" lang="ts" setup>
import SdyHeader from '../../components/header.vue'
import { getCartList } from '../../model/carts'
import { ref, onMounted } from 'vue'
import useUserStore from '../../store/user'

const $userStore = useUserStore() as any

interface cartInfo {
    cartid?: string
    originprice: number
    proname?: string
    img1?: string
    num?: number
}

const cartList = ref<Array<cartInfo>>([])

const getCartListHandler = async () => {
    const userid = window.localStorage.getItem('user_id') || ''
    const res = await getCartList(userid)
    if ((res as any).code !== '200') return
    cartList.value = res.data
}

onMounted(() => {
    getCartListHandler()
    $userStore.fn()
})
</script>

<style scoped lang="scss">
.delete-button {
    height: 100%;
}

.cart-item-count {
    height: 30px;
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
}
</style>